

<script setup>
import { Avatar, Checked, TrendCharts, User, UserFilled, PieChart } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue'
// 导入echarts核心库
import * as echarts from 'echarts'

// 页面挂载时初始化柱形图和扇形图
onMounted(() => {
    initChartBar()
    initChartPie()
})

// 绑定图表DOM元素
const barRef = ref(null)
const pieRef = ref(null)

// 统一管理专业数据（柱形图和扇形图共用，确保数据一致性）
const majorData = {
    names: ['计算机应用', '计算机网络', '智慧城市', '软件技术', '平面设计', '项目管理'],
    values: [5, 20, 36, 10, 10, 20],
    // 为每个专业配置专属颜色（保证两图表颜色对应）
    colors: ['#4895ef', '#7209b7', '#f72585', '#4cc9f0', '#4361ee', '#f72585']
}

// 1. 初始化柱形图（保留原功能，使用统一数据）
const initChartBar = () => {
    if (!barRef.value) return;
    let myEcharts = echarts.init(barRef.value);
    const option = {
        title: {
            text: '各专业报到人数',
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 500 }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter: '{b}: {c}人'
        },
        legend: {
            data: ['报到人数'],
            bottom: 10
        },
        xAxis: {
            data: majorData.names,
            axisLabel: { rotate: 15, fontSize: 12 }, // 标签旋转防重叠
            axisLine: { lineStyle: { color: '#eee' } }
        },
        yAxis: {
            name: '人数',
            min: 0,
            axisLabel: { formatter: '{value}人', fontSize: 12 },
            axisLine: { lineStyle: { color: '#eee' } },
            splitLine: { lineStyle: { color: '#f5f5f5' } }
        },
        series: [
            {
                name: '报到人数',
                type: 'bar',
                data: majorData.values,
                itemStyle: { 
                    color: (params) => majorData.colors[params.dataIndex], // 对应扇形图颜色
                    borderRadius: [4, 4, 0, 0]
                },
                barWidth: '45%'
            }
        ],
        grid: {
            left: '5%',
            right: '5%',
            bottom: '20%',
            top: '20%'
        }
    };
    myEcharts.setOption(option);
    // 窗口 resize 时图表自适应
    window.addEventListener('resize', () => myEcharts.resize());
}

// 2. 初始化扇形图（核心修改：改为各专业报到人数占比）
const initChartPie = () => {
    if (!pieRef.value) return;
    let myEcharts = echarts.init(pieRef.value);
    
    // 处理扇形图数据格式（name+value+color）
    const pieData = majorData.names.map((name, index) => ({
        name: name,
        value: majorData.values[index],
        itemStyle: { color: majorData.colors[index] } // 与柱形图颜色一一对应
    }));

    const option = {
        title: {
            text: '各专业报到人数占比',
            left: 'center',
            textStyle: { fontSize: 16, fontWeight: 500 }
        },
        tooltip: {
            trigger: 'item',
            // 提示内容：专业名称 + 报到人数 + 占比（保留1位小数）
            formatter: '{b}<br/>报到人数：{c}人<br/>占比：{d}%'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: majorData.names,
            textStyle: { fontSize: 12 },
            itemWidth: 12, // 图例标记宽度
            itemHeight: 12
        },
        series: [
            {
                name: '报到人数占比',
                type: 'pie',
                radius: ['40%', '70%'], // 环形扇形图（避免单调）
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 6, // 扇形边缘圆角（提升精致度）
                    borderColor: '#fff', // 扇形间隔白色边框
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    // 鼠标 hover 时突出显示
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold',
                        formatter: '{b}\n{c}人' // 中心显示专业+人数
                    }
                },
                labelLine: { show: false },
                data: pieData // 使用统一处理的专业数据
            }
        ],
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '20%'
        }
    };
    myEcharts.setOption(option);
    // 窗口 resize 时图表自适应
    window.addEventListener('resize', () => myEcharts.resize());
}
</script>

<template>
    <!-- 顶部数据统计卡片区域 -->
    <div class="Dashboard">
        <div class="item">
            <p class="title">总新生人数：</p>
            <p class="value">2400</p>
            <div class="icon-box">
                <el-icon color="#fff" size="60px"><Avatar /></el-icon>
            </div>
        </div>
        <div class="item">
            <p class="title">已报到人数：</p>
            <p class="value">400</p>
            <div class="icon-box">
                <el-icon color="#fff" size="60px"><Checked /></el-icon>
            </div>
        </div>
        <div class="item">
            <p class="title">未报到人数：</p>
            <p class="value">2000</p>
            <div class="icon-box">
                <el-icon color="#fff" size="60px"><Avatar /></el-icon>
            </div>
        </div>
        <div class="item">
            <p class="title">报到率：</p>
            <p class="value">20%</p>
            <div class="icon-box">
                <el-icon color="#fff" size="60px"><TrendCharts /></el-icon>
            </div>
        </div>
    </div>

    <!-- 图表区域：左侧柱形图 + 右侧扇形图（各专业数据） -->
    <div class="chart-box">
        <div ref="barRef" class="chart-bar chart-item"></div>
        <div ref="pieRef" class="chart-pie chart-item"></div>
    </div>
</template>

<style scoped>
/* 数据统计卡片样式 */
.Dashboard {
    display: flex;
    flex-wrap: wrap;
    width: 97%;
    margin: 0 auto;
    gap: 20px;
    margin-bottom: 20px;
    padding-top: 15px;
}

.item {
    flex: 1;
    min-width: 220px;
    height: 120px;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
    position: relative;
    transition: box-shadow 0.3s ease;
}

/* 卡片hover效果（提升交互感） */
.item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.item:first-child { background-color: rgba(0, 240, 240, 1); }
.item:nth-child(2) { background-color: rgba(51, 204, 153, 1); }
.item:nth-child(3) { background-color: rgba(64, 128, 255, 1); }
.item:nth-child(4) { background-color: rgba(255, 102, 102, 1); }

.title {
    color: #fff;
    text-align: left;
    margin: 0 0 8px 0;
    font-size: 14px;
    opacity: 0.9;
}

.value {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: left;
    margin: 0;
}

.icon-box {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* 图表区域样式 */
.chart-box {
    height: 420px;
    display: flex;
    width: 97%;
    margin: 0 auto;
    gap: 20px;
    margin-bottom: 30px;
}

.chart-item {
    flex: 1;
    min-width: 300px;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 15px;
    box-sizing: border-box;
}

/* 扇形图容器专属样式 */
.chart-pie {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>